<template>
  <el-dialog
    title="导入学员"
    :visible.sync="visible"
    width="600px"
    :close-on-click-modal="false"
    class="dialog-container"
    @close="handlerClose"
  >
    <el-form ref="student" :model="formData" size="small">
      <el-form-item prop="attach_id" label="请上传附件" :rules="rulesFile">
        <edu-upload :value.sync="formData.attach_id" field="attach_id" :args="uploadArgs" />
      </el-form-item>
      <el-form-item label="考试时间" prop="time">
        <el-date-picker
          v-model="formData.time"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        <div class="edu-tips">为空表示随时可以作答</div>
      </el-form-item>
      <el-form-item label="作答次数" prop="exam_number">
        <el-input-number v-model="formData.exam_number" :min="0" :step="1" />
        <div class="edu-tips">0 表示不限制作答次数</div>
      </el-form-item>
      <el-form-item label="及格线" prop="exam_score_pass">
        <el-input-number v-model="formData.exam_score_pass" :min="0" :step="1" :max="paper.total_score" :precision="1" /> <span>（试卷总分：{{ paper.total_score }}）</span>
      </el-form-item>
      <el-form-item label="人脸验证" prop="face_verification">
        <el-switch v-model="formData.face_verification" :active-value="1" :inactive-value="0"></el-switch>
        <div class="edu-tips">开启后，进入考试需要进行人脸验证</div>
      </el-form-item>
    </el-form>
    <form-footer slot="footer" :loading="confirmLoading" class="dialog-footer" @cancel="handlerClose" @submit="handlerConfirm" />
  </el-dialog>
</template>

<script>
import EduUpload from '@public/form/upload';
import FormFooter from '@/components/form-footer'
export default {
  components: {
    EduUpload,
    FormFooter
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    paperId: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      formData: {
        attach_id: '',
        time: '',
        exam_number: 0,
        face_verification: 0,
        exam_score_pass: 0
      },
      paper: {
        total_score: 0
      },
      rulesFile: [{ required: true, message: '请上传附件', trigger: ['blur', 'change'] }],
      confirmLoading: false,
      uploadArgs: {
        limit: 1,
        accept: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel',
        autoupload: 1,
        upload_params: {
          is_temp: true
        }
      }
    };
  },
  created() {
    this.loadBaseInfo()
  },
  methods: {
    loadBaseInfo() {
      this.$http.get(
          '/exam/admin/paper/' + this.paperId + '/base/info',
          {},
          ({ data }) => {
            this.paper = data
          },
          ({ msg }) => {
            this.$message.error(msg)
            this.confirmLoading = false
          }
      )
    },
    handlerClose() {
      this.$emit('update:visible', false);
    },
    handlerConfirm: function() {
      this.$refs['student'].validate(valid => {
        if (valid) {
          this.confirmLoading = true;
          this.$http.post(
            '/exam/admin/paper/' + this.paperId + '/student/import',
            this.formData,
            response => {
              const data = response.data;
              this.$box
                .success('共计' + data.total + '个学员，成功导入' + data.success + '个，其中' + data.exists + '个学员已在该试卷中', {
                  duration: 0
                })
                .then(() => {
                  this.confirmLoading = false;
                  this.handlerClose()
                })
                .catch(() => {});
            },
            error => {
              this.$box.error(error.msg, {
                duration: 0
              });
              this.confirmLoading = false;
            },
            false
          );
        }
      });
    }
  }
};
</script>

<style></style>
